<template lang="pug">
  .layout
    .left
      .head
        .img
        .mes
          .name 背锅侠
          .identity 管理员
      .list(v-for="(item,index) in lists" :key="index")
        .headline(@click="showmenu(item)")
          i(:class="classname[index]")
          | {{item.onetitle}}
        transition(name="fade")
          .stitle(v-show="item.ishow==true")
            //- .name( v-for="(l,i) in item.twotitle" :key="i" :class="{active:l.name==check}" @click="goto(l)") •  {{l.name}}
            div(v-for="(l,i) in item.twotitle" @click="canpayupdade(false)")
              router-link.name( :to="l.url" :key="i" ) •  {{l.name}}
    .top
      .mes
        span.y {{getTime().time}}
        span.week {{getTime().week}}
        .back(@click="gologin()")
          i
          | 登出
    .body
      router-view
    .loader.loader4(v-show="loading")
      div
        div
          div
            div
              div
                div
                  div
                    div
                      div
                        div


</template>
<script>
import {mapGetters,mapActions} from 'vuex'
let lists = [
    {
      onetitle: '单位管理',
      ishow:false,
      twotitle: [
          {
              name: '单位列表',
              url: 'unitmanagement',
          },
          {
            name: '行业列表',
            url: 'industrylist',
          }
      ]
    },
    /*{
      onetitle: '用户管理',
      ishow:false,
      twotitle: [
          {
              name: '用户列表',
              url: 'userlist',
          }
      ]
    },*/
    {
      onetitle: '关键词管理',
      ishow:false,
      twotitle: [
          {
              name: '关键词列表',
              url: 'keylist',
          },
          {
              name: '过滤关键词列表',
              url: 'filterkeylist',
          }
      ]
    },
    {
      onetitle: '系统管理',
      ishow:false,
      twotitle: [
          {
              name: '公告管理',
              url: 'noticelist',
          },
          {
              name: '意见反馈管理',
              url: 'feedfack',
          },
          {
              name: '申请试用列表',
              url: 'trial',
          }/*,
          {
              name: '行业划分',
              url: 'divide',
          }*/
      ]
    },
]
const classname = ['dwgl', 'gjck', 'xtwh']
export default {
  name:'layout',
  data(){
    return{
      lists,
      classname,
      check:'单位列表',
      date:{}
    }
  },
  computed:{
    ...mapGetters([
      'loading'
    ])
  },
  mounted(){
    this.getmenu()
  },
  watch:{
    $route(){
      this.$nextTick(function(){
          this.getmenu()
      })
    }
  },
  methods:{
    ...mapActions([
        'canpayupdade'
    ]),
    getmenu(){
      let dom = document.getElementsByClassName('router-link-active')[0]
      if(!dom){
        return
      }
      let text =dom.innerText
      text = text.substring(2).trim()
      this.$nextTick(function(){
        this.lists.map(d => d.twotitle.map(j => {
          if(j.name ==text){
            d.ishow = true
          }
        }))
      })
    },
    goto(l){
      alert("ss")
      this.check = l.name
      this.$router.push('/home/'+l.url)
      this.canpayupdade(false)

    },
    showmenu(item){
      item.ishow = !item.ishow
    },
    getTime(){
      let date = {}
      let mydate = new Date()
      let weeks = ['天','一','二','三','四','五','六',]
      let n = mydate.getDay()
      let week = weeks[n]
      date.week = `星期${week}`
      let y = mydate.getFullYear()
      let m = mydate.getMonth()+1
      let d = mydate.getDate()
      date.time = y+'-'+m+'-'+d
      return date
    },
    gologin(){
      this.$router.push('/')
    }
  }
}
</script>
<style lang="stylus" scoped>
    .layout
      width 100%
      height 100%
      position relative
      .left
        position absolute
        left 0
        top 0
        min-height 100vh
        width 213px
        padding 15px
        padding-top 40px
        background #38418a
        box-sizing border-box
        .head
          font-size 0
          margin-bottom 33px
          .img
            display inline-block
            vertical-align top
            margin-left 25px
            width 63px
            height 63px
            background url('img/defult.png') no-repeat
            background-size cover
            border-radius 50%
            overflow hidden
          .mes
            display inline-block
            margin-left 17px
            color #ffffff
            .name
              margin-top 9px
              font-size 20px
            .identity
              font-size 14px
              margin-top 9px
        .list
          margin-top 15px
          .headline
            height 22px
            line-height 22px
            font-size 14px
            color #ffffff
            cursor pointer
            >i
              display inline-block
              width 22px
              height 22px
              vertical-align top
              margin 0 15px 0 20px
              for item in dwgl gjck xtwh
                &.{item}
                  background-image 'url(./img/%s.png)' % item
                  background-repeat no-repeat
                  background-position center center
          .stitle
            // transition all 0.65s
            .name
              text-decoration none
              display block
              margin-top 15px
              height 30px
              line-height 30px
              padding-left 60px
              color #b3baf4
              border-radius 50px
              font-size 14px
              cursor pointer
              &.router-link-active
                background #e75a46
                color #fff
      .top
        height 50px
        border-bottom 1px solid black
        background #fff
        .mes
          float right
          height 50px
          font-size 0
          line-height 50px
          .y
          .week
            display inline-block
            vertical-align top
            font-size 14px
            color #686868
            &.week
              margin-left 20px
          .back
            display inline-block
            color #e75a46
            margin 0 60px 0 58px
            font-size 14px
            cursor pointer
            i
              display inline-block
              vertical-align middle
              margin-right 7px
              width 16px
              height 16px
              background url('img/back.png') no-repeat
              background-size cover
      .body
        position absolute
        top 50px
        left 213px
        bottom 0
        right 0
        background #f0f5fb
        padding 30px 30px 44px 30px
        overflow auto

      .loader
        position fixed
        top 50%
        left 50%
        width 150px
        height 150px
        transform translateX(-50%) translateY(-50%)
        display block
        overflow hidden
        // background #fff
        cursor pointer
        div
          height 100%
      .loader4
      .loader4
        div
          border-radius 50%
          padding 8px
          border 2px solid transparent
          animation rotate linear 3.5s infinite
          border-radius 50%
          padding 4px
          animation rotate2 4s infinite linear
          box-sizing border-box
          &:hover
            animation-play-state: paused;
      .loader
        .loader
          *
            will-change transform
@keyframes rotate
	0%
		transform rotate(0deg)

	50%
		transform rotate(180deg)

	100%
		transform rotate(360deg)

@keyframes rotate2
	0%
		transform rotate(0deg)
		border-top-color rgba(0, 0, 0, .5)

	50%
		transform rotate(180deg)
		border-top-color rgba(0, 0, 255, .5)

	100%
		transform rotate(360deg)
		border-top-color rgba(0, 0, 0, .5)

</style>


